<template>
  <div class="nav-index-container">
    <svg width="100%" height="100%" viewBox="0 0 500 100">
      <!-- 背景渐变 -->
      <defs>
        <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#1e3a8a;stop-opacity:0.8" />
          <stop offset="50%" style="stop-color:#3b82f6;stop-opacity:0.6" />
          <stop offset="100%" style="stop-color:#0ea5e9;stop-opacity:0.4" />
        </linearGradient>
        
        <linearGradient id="buttonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#00d4ff;stop-opacity:0.8" />
          <stop offset="100%" style="stop-color:#0099cc;stop-opacity:0.6" />
        </linearGradient>
        
        <linearGradient id="buttonActiveGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#00ff88;stop-opacity:0.9" />
          <stop offset="100%" style="stop-color:#00cc66;stop-opacity:0.7" />
        </linearGradient>
        
        <!-- 动画渐变 -->
        <radialGradient id="glowGradient" cx="50%" cy="50%" r="50%">
          <stop offset="0%" style="stop-color:#00d4ff;stop-opacity:0.8" />
          <stop offset="70%" style="stop-color:#00d4ff;stop-opacity:0.3" />
          <stop offset="100%" style="stop-color:#00d4ff;stop-opacity:0" />
        </radialGradient>
      </defs>
      
      <!-- 背景 -->
      <rect width="100%" height="100%" fill="url(#bgGradient)" rx="8" />
      
      <!-- 底部波浪装饰 -->
      <path d="M0,80 Q125,60 250,80 T500,80 L500,100 L0,100 Z" 
            fill="rgba(0, 212, 255, 0.2)" />
      
      <!-- 装饰性波浪纹理 -->
      <path d="M0,70 Q100,50 200,70 T400,70 Q450,65 500,70" 
            stroke="rgba(0, 212, 255, 0.4)" 
            stroke-width="1" 
            fill="none" />
      
      <path d="M0,75 Q150,55 300,75 T500,75" 
            stroke="rgba(0, 153, 204, 0.3)" 
            stroke-width="1" 
            fill="none" />
      
      <!-- 动态光点 -->
      <circle cx="80" cy="25" r="3" fill="url(#glowGradient)">
        <animate attributeName="opacity" values="0.3;1;0.3" dur="2s" repeatCount="indefinite" />
      </circle>
      
      <circle cx="200" cy="35" r="2" fill="url(#glowGradient)">
        <animate attributeName="opacity" values="0.5;1;0.5" dur="1.5s" repeatCount="indefinite" begin="0.5s" />
      </circle>
      
      <circle cx="350" cy="20" r="2.5" fill="url(#glowGradient)">
        <animate attributeName="opacity" values="0.4;1;0.4" dur="1.8s" repeatCount="indefinite" begin="1s" />
      </circle>
      
      <circle cx="450" cy="30" r="2" fill="url(#glowGradient)">
        <animate attributeName="opacity" values="0.6;1;0.6" dur="2.2s" repeatCount="indefinite" begin="0.3s" />
      </circle>
      
      <!-- 导航按钮 -->
      <g class="nav-buttons">
        <!-- 按钮1: 总览 -->
        <g class="nav-button" :class="{ active: activeIndex === 0 }" @click="setActive(0)">
          <rect x="20" y="15" width="80" height="30" rx="15" 
                :fill="activeIndex === 0 ? 'url(#buttonActiveGradient)' : 'url(#buttonGradient)'" 
                stroke="rgba(255, 255, 255, 0.3)" stroke-width="1" />
          <text x="60" y="33" text-anchor="middle" fill="white" font-size="12" font-weight="600">
            总览
          </text>
        </g>
        
        <!-- 按钮2: 充电桩 -->
        <g class="nav-button" :class="{ active: activeIndex === 1 }" @click="setActive(1)">
          <rect x="110" y="15" width="80" height="30" rx="15" 
                :fill="activeIndex === 1 ? 'url(#buttonActiveGradient)' : 'url(#buttonGradient)'" 
                stroke="rgba(255, 255, 255, 0.3)" stroke-width="1" />
          <text x="150" y="33" text-anchor="middle" fill="white" font-size="12" font-weight="600">
            充电桩
          </text>
        </g>
        
        <!-- 按钮3: 换电站 -->
        <g class="nav-button" :class="{ active: activeIndex === 2 }" @click="setActive(2)">
          <rect x="200" y="15" width="80" height="30" rx="15" 
                :fill="activeIndex === 2 ? 'url(#buttonActiveGradient)' : 'url(#buttonGradient)'" 
                stroke="rgba(255, 255, 255, 0.3)" stroke-width="1" />
          <text x="240" y="33" text-anchor="middle" fill="white" font-size="12" font-weight="600">
            换电站
          </text>
        </g>
        
        <!-- 按钮4: 维护点 -->
        <g class="nav-button" :class="{ active: activeIndex === 3 }" @click="setActive(3)">
          <rect x="290" y="15" width="80" height="30" rx="15" 
                :fill="activeIndex === 3 ? 'url(#buttonActiveGradient)' : 'url(#buttonGradient)'" 
                stroke="rgba(255, 255, 255, 0.3)" stroke-width="1" />
          <text x="330" y="33" text-anchor="middle" fill="white" font-size="12" font-weight="600">
            维护点
          </text>
        </g>
        
        <!-- 按钮5: 统计 -->
        <g class="nav-button" :class="{ active: activeIndex === 4 }" @click="setActive(4)">
          <rect x="380" y="15" width="80" height="30" rx="15" 
                :fill="activeIndex === 4 ? 'url(#buttonActiveGradient)' : 'url(#buttonGradient)'" 
                stroke="rgba(255, 255, 255, 0.3)" stroke-width="1" />
          <text x="420" y="33" text-anchor="middle" fill="white" font-size="12" font-weight="600">
            统计
          </text>
        </g>
      </g>
      
      <!-- 底部文字说明 -->
      <text x="250" y="85" text-anchor="middle" fill="rgba(140, 158, 255, 0.8)" font-size="10">
        共享换电系统：终端供应、资源管理、共享运力、共享运力
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeIndex = ref(0)

const setActive = (index: number) => {
  activeIndex.value = index
}
</script>

<style scoped lang="less">
.nav-index-container {
  width: 100%;
  height: 100%;
  min-height: 100px;
}

.nav-button {
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-1px);
    
    rect {
      filter: brightness(1.2);
    }
  }
  
  &.active {
    rect {
      filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.6));
    }
  }
}
</style>